<template>
  <div class="error-page">
    <div class="error-content">
      <icon class="error-img mb-16" size="140px" name="ic_error" />
      <p class="title mb-4">{{ $t('404_Tip') }}</p>
      <p class="tip mb-24">{{ $t('Wrong_prompt') }}</p>
      <div v-if="!isHomePage" class="btn">
        {{ $t('Back_Tip').replace('X', 5) }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ErrorPage',

  data() {
    return {
      isHomePage: true
    };
  },

  mounted() {
    const homePath = this.localePath('/', this.$i18n.locale);
    const { path } = this.$route;
    const isHomePage = homePath === path || path === '/';
    this.isHomePage = isHomePage;

    if (isHomePage) {
      return;
    }

    setTimeout(() => {
      this.$router.push({
        path: this.localePath('/', this.$i18n.locale)
      });
    }, 5000);
  }
};
</script>

<style lang="scss" scoped>
@import '~assets/styles/variable.scss';

.error-page {
  width: $page-width;
  margin: 0 auto;

  .error-content {
    padding-top: 120px;
    text-align: center;
    .title {
      font-size: 20px;
      color: #0c0c1c;
      letter-spacing: 0;
      text-align: center;
      line-height: 32px;
      font-weight: 500;
    }

    .tip {
      font-size: 14px;
      color: rgba(12, 12, 28, 0.7);
      letter-spacing: 0;
      text-align: center;
      line-height: 20px;
    }

    .btn {
      margin: 0 auto;
      width: 200px;
      height: 40px;
      line-height: 40px;
      background: #fa4646;
      border-radius: 20px;
      font-size: 16px;
      color: #ffffff;
      padding: 0 16px;
    }
  }
}
</style>
